import React from 'react';
import {observer} from 'mobx-react';
import {Button, message, Modal} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {Action, TableCard} from '@/components';
import {http} from 'libs';
import store from './store';

// id=1,sn=bh,name=运费,remarks=备注
export default observer(function () {
  const columns = [{
    title: 'No.',
    key: 'series',
    width: 50,
    render: (_, __, index) => <span className="idx">{index + 1}</span>
  }, {
    title: '费用名称',
    dataIndex: 'name',
  }, {
    title: '费用编号',
    dataIndex: 'sn',
  }, {
    title: '备注',
    dataIndex: 'remarks',
  }, {
    title: '创建时间',
    dataIndex: 'created_at',
  }, {
    title: '操作',
    width: 180,
    render: info => (
      <Action>
        <Action.Button onClick={() => store.showForm(info)}>编辑</Action.Button>
        <Action.Button danger onClick={() => handleDelete(info)}>删除</Action.Button>
      </Action>
    )
  }]

  function handleDelete(info) {
    Modal.confirm({
      title: '删除确认',
      content: `确定要删除【${info['name']}】?`,
      onOk: () => {
        return http.delete('/api/expense/', {params: {id: info.id}})
          .then(() => {
            message.success('删除成功');
            store.fetchRecords()
          })
      }
    })
  }

  return (
    <TableCard
      title="费用列表"
      rowKey="id"
      bordered
      loading={store.fetching}
      dataSource={store.dataSource}
      columns={columns}
      pagination={{
        showSizeChanger: true,
        showLessItems: true,
        hideOnSinglePage: true,
        pageSizeOptions: ['10', '20', '50', '100']
      }}
      onReload={store.fetchRecords}
      actions={[
        <Button type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新建费用</Button>,
      ]}/>
  )
})
